<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="framework/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="framework/icon.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/index.js"></script>
    <title>饿了么首页</title>
</head>

<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header -->
        <header>
            <div class="icon-location-box">
                <div class="icon-location"></div>
            </div>
            <div class="location-text">天津市天津大学北洋园<i class="fa fa-caret-down"></i></div>
        </header>
        <!-- 搜索框 -->
        <!-- 后面搜索框要设置成固定定位，没有外层的话，下滑过程中下面部分会突然上移 -->
        <div class="search">
            <!--固定定位-->
            <div class="search-fixed-top" id="fixedBox">
                <div class="search-box">
                    <i class="fa fa-search"></i>搜索饿了么商家、商品名称
                </div>
            </div>
        </div>
        <!-- 点餐分类 -->
        <ul class="foodtype">
            <li onclick="location.href='businessList.html'">
                <img src="img/dcfl01.png">
                <p>美食</p>
            </li>
            <li>
                <img src="img/dcfl02.png">
                <p>早餐</p>
            </li>
            <li>
                <img src="img/dcfl03.png">
                <p>跑腿代购</p>
            </li>
            <li>
                <img src="img/dcfl04.png">
                <p>汉堡披萨</p>
            </li>
            <li>
                <img src="img/dcfl05.png">
                <p>甜品饮品</p>
            </li>
            <li>
                <img src="img/dcfl06.png">
                <p>素食简餐</p>
            </li>
            <li>
                <img src="img/dcfl07.png">
                <p>地方小吃</p>
            </li>
            <li>
                <img src="img/dcfl08.png">
                <p>米粉面馆</p>
            </li>
            <li>
                <img src="img/dcfl09.png">
                <p>包子粥铺</p>
            </li>
            <li>
                <img src="img/dcfl10.png">
                <p>炸鸡炸串</p>
            </li>
        </ul>
        <!--横幅广告-->
        <div class="banner">
            <h3>品质套餐</h3>
            <p>搭配齐全吃得好</p>
            <a>立即抢购 &gt;</a><!--转义字符箭头-->
        </div>
        <!--超级会员-->
        <div class="supermember">
            <div class="left">
                <img src="img/VIP.png">
                <h3>超级会员</h3>
                <p>&#8226; 每月享超值权益</p>
            </div>
            <div class="right">
                立即开通 &gt;
            </div>
        </div>
        <!--推荐商家-->
        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>
        <!--推荐方式-->
        <ul class="recommendtype">
            <li>综合排序<i class="fa fa-caret-down"></i></li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选<i class="fa fa-filter"></i></li>
        </ul>
        <!--推荐商家列表-->
        <ul class="business">
            <li><!--饺子馆-->
                <img src="img/sj01.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>万家饺子（软件园E18店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22公里 | 30分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>各种饺子</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--豆腐馆-->
                <img src="img/sj02.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>小锅饭豆腐馆（全运店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>3.6 月售233单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>4.21公里 | 42分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>特色美食</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--麦当劳-->
                <img src="img/sj03.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>麦当劳麦乐送（全运路店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.8 月售562单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>2.10公里 | 20分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>汉堡薯条</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--米村拌饭-->
                <img src="img/sj04.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>米村拌饭（浑南店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>3.1 月售145单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>4.11公里 | 35分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>各种炒菜拌饭</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--串串-->
                <img src="img/sj05.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>申记串道（中海康城店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>3.0 月售300单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>2.15公里 | 20分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>烤串炸串</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--米饭-->
                <img src="img/sj06.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>半亩良田排骨米饭</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.0 月售410单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>5.25公里 | 50分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>排骨米饭套餐</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>

            <li><!--饮品-->
                <img src="img/sj07.png">
                <div class="business-info">
                    <div class="business-info-h">
                        <h3>茶兮鲜果饮品（国际软件园店）</h3>
                        <div class="business-info-like">&#8226</div>
                    </div>
                    <div class="business-info-star">
                        <div class="business-info-star-left">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.2 月售500单</p>
                        </div>
                        <div class="business-info-star-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <div class="business-info-delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>1.50公里 | 15分钟</p>
                    </div>

                    <div class="business-info-explain">
                        <div>甜品饮品</div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon">新</div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="business-info-promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>

                    <div class="business-info-promotion">
                        <div class="business-info-promotion-left">
                            <div class="business-info-promotion-left-incon" style="background-color: #f1884f;">特</div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 底部菜单 -->
        <ul class="footer">
            <li onclick="location.href='index.html'">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li>
                <i class="fa fa-compass"></i>
                <p>发现</p>
            </li>
            <li onclick="location.href='orderList.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li onclick="location.href='integration.html'">
                <i class="fa fa-gift"></i>
                <p>积分</p>
            </li>
            <li onclick="location.href='login.html'">
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
</body>

</html>